<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-spin :spinning="confirmLoading">

      <a-form :form="form">

        <a-form-item :label="$t('systemManagement.project')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-decorator="[ 'projectCode', validatorRules.projectCode]" :placeholder="$t('base.pleaseChoose')" @change="handleChangeProjectCode">
            <a-select-option v-for="item in projectList" :key="item.id" :value="item.code">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="$t('light.belongingLightPole')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select  v-decorator="[ 'lightPoleCode', validatorRules.lightPoleCode]" :placeholder="$t('base.pleaseChoose')">
            <a-select-option v-for="item in lightPoleList" :key="item.id" :value="item.code">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="$t('light.gateWayName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'gatewayName', validatorRules.gatewayName]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.gateWayCode')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="12" v-decorator="[ 'gateWayCode', validatorRules.gateWayCode]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.phoneNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="11" v-decorator="[ 'phoneNumber', validatorRules.phoneNumber]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.mobileCardType')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag  v-decorator="['phoneType', validatorRules.phoneType]" :triggerChange="true" :placeholder="$t('light.mobileCardType')"
                              dictCode="glr_phone_type"/>
        </a-form-item>

        <a-form-item :label="$t('light.gateWayModel')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag  v-decorator="['gatewayModel', validatorRules.gatewayModel]" :triggerChange="true" :placeholder="$t('light.gateWayModel')"
                              dictCode="glr_gateway_model"/>
        </a-form-item>

        <a-form-item :label="$t('light.gateWayType')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag   v-decorator="['gatewayType', validatorRules.gatewayType]" :triggerChange="true" :placeholder="$t('light.gateWayType')"
                              dictCode="glr_gateway_type"/>
        </a-form-item>

        <a-form-item :label="$t('light.longitude')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'longitude', validatorRules.longitude]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.latitude')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'latitude', validatorRules.latitude]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.workStatus')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag  v-decorator="['currentWorkStatus', validatorRules.currentWorkStatus]" :triggerChange="true" :placeholder="$t('base.pleaseChoose')"
                              dictCode="sys_yn"/>
        </a-form-item>

        <a-form-item :label=" $t('light.subControlQuantity')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'controlNumber', validatorRules.controlNumber]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

      <!--  <a-form-item label="控制模式" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'controlModel', validatorRules.controlModel]" placeholder="请输入控制模式"></a-input>
        </a-form-item>-->

      <!--  <a-form-item label="当前时段" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'currentPeriod', validatorRules.currentPeriod]" placeholder="请输入当前时段"></a-input>
        </a-form-item>-->

        <a-form-item :label="$t('light.dimmingValue')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'dimmingValue', validatorRules.dimmingValue]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.switchStatus')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'switchingState', validatorRules.switchingState]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.mainControlTemperature')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'temperature', validatorRules.temperature]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.humidity')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'humidity', validatorRules.humidity]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.phaseAVoltage')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'voltageA', validatorRules.voltageA]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.phaseBVoltage')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'voltageB', validatorRules.voltageB]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.phaseCVoltage')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'voltageC', validatorRules.voltageC]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.phaseACurrent')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'currentA', validatorRules.currentA]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.phaseBCurrent')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'currentB', validatorRules.currentB]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.phaseCCurrent')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'currentC', validatorRules.currentC]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.illuminance')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'illuminance', validatorRules.illuminance]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.mainLinePowerOff')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'outage', validatorRules.outage]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.feedbackInformation')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'signalValue', validatorRules.signalValue]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

        <a-form-item :label="$t('light.batteryVoltage')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input maxlength="16" v-decorator="[ 'cellVoltage', validatorRules.cellVoltage]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>

      </a-form>

    </a-spin>
  </a-drawer>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import {duplicateCheck } from '@/api/api'

  export default {
    name: "GlrGatewayView",
    components: { 
    },
    data () {
      return {
        form: this.$form.createForm(this),
        title:this.$t('base.detailL') ,
        width:800,
        visible: false,
        drawerWidth:700,
        lightPoleList:[],
        disableMixinCreated:true,
        projectList:[],

        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          phoneNumber: {rules: [
          ]},
          phoneType: {rules: [
          ]},
          gatewayModel: {rules: [
              {required: true, message:this.$t('base.pleaseEnter')+'!'},

          ]},
          projectCode: {rules: [
              {required: true, message: this.$t('base.pleaseEnter')+'!'},
            ]},
          gatewayType: {rules: [
              {required: true, message: this.$t('base.pleaseEnter')+'!'},
          ]},
          lightPoleCode: {rules: [
            ]},
          longitude: {rules: [
          ]},
          latitude: {rules: [
          ]},
          gatewayName: {rules: [
              {required: true, message:this.$t('base.pleaseEnter')+'!'},
          ]},
          gateWayCode: {rules: [
              {required: true, message:this.$t('base.pleaseEnter')+'!'},
              {
                validator: this.validateGateWayCode,
              }
          ]},

        },
        url: {
          add: "/glr/glrGateway/add",
          edit: "/glr/glrGateway/edit",
          getLightPoleList: "/glr/glrLightPole/getLightPoleList",
          getProjectList: "/glr/glrProject/getProject",
        }
      }
    },
    created () {

    },
    methods: {
      validateGateWayCode(rule, value, callback){
        var params = {
          tableName: 'glr_gateway',
          fieldName: 'gate_way_code',
          fieldVal: value,
          dataId: this.model.id
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("网关编号已存在!")
          }
        })
      },
      add () {
        this.edit({});
      },
      edit (record) {

        const that = this;
        httpAction(that.url.getProjectList,{},"post").then((res)=>{
          if(res.success){
            that.projectList=res.result;
          }else{
            //that.$message.warning(res.message);
                      that.$message.warning(that.$t('base.operationFailed'));
          }
        }).finally(() => {
          that.confirmLoading = false;
        })

        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'lightPoleCode','projectCode','phoneNumber','phoneType','gatewayModel','gatewayType',
                      'longitude','latitude','lightPoleCode','gatewayName','gateWayCode',
                      'controlNumber','currentWorkStatus','controlModel',
                      'currentPeriod','dimmingValue','switchingState','temperature','humidity','voltageA','voltageB',
                      'voltageC','currentA','currentB','currentC','illuminance','outage','signalValue','cellVoltage',
                      ))
        })
        if (this.model.projectCode){
          this.handleChangeProjectCode(this.model.projectCode);
        }
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                //that.$message.success(res.message);
                that.$message.success(that.$t('base.operationSuccessful'));
                that.$emit('ok');
              }else{
                //that.$message.warning(res.message);
                      that.$message.warning(that.$t('base.operationFailed'));
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
         
        })
      },
      handleCancel () {
        this.close()
      },
      handleChangeProjectCode(projectCode){
        const that = this;
        that.form.setFieldsValue({'lightPoleCode': ''});
        httpAction(that.url.getLightPoleList,{projectCode:projectCode},"post").then((res)=>{
          if(res.success){
            that.lightPoleList=res.result;
            that.lightPoleList.unshift({id: "-1",code: "",name: "请选择"})
          }else{
            //that.$message.warning(res.message);
                      that.$message.warning(that.$t('base.operationFailed'));
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      }
      
    }
  }
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 0px;
  }
</style>